<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <mask id="mask1">
                <circle cx="40" cy="50" r="20" fill="gray"/>
            </mask>
        </defs>

        <rect x="20" y="30" width="60" height="40" fill="#fac" mask="url(#mask1)"/>
        <rect x="20" y="30" width="60" height="40" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <mask id="mask2">
                <circle cx="40" cy="50" r="20" fill="white"/>
                <circle cx="40" cy="50" r="10" fill="black"/>
                <circle cx="40" cy="50" r="5" fill="gray"/>
            </mask>
        </defs>

        <rect x="20" y="30" width="60" height="40" fill="#fac" mask="url(#mask2)"/>
        <rect x="20" y="30" width="60" height="40" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <linearGradient id="gradient3">
                <stop offset="0" stop-color="#000" />
                <stop offset="1" stop-color="#fff" />
            </linearGradient>
            <mask id="mask3">
                <rect x="20" y="30" width="60" height="40" fill="url(#gradient3)" />
            </mask>
        </defs>
        
        <rect x="20" y="30" width="60" height="40" fill="#fac" mask="url(#mask3)"/>
        <rect x="20" y="30" width="60" height="40" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <linearGradient id="gradient4">
                <stop offset="0" stop-color="#000" />
                <stop offset="1" stop-color="#fff" />
            </linearGradient>
            <mask id="mask4" maskContentUnits="objectBoundingBox" maskUnits="">
                <rect x="0" y="0" width="1" height="1" fill="url(#gradient4)" />
            </mask>
        </defs>
        
        <rect x="10" y="20" width="40" height="20" fill="#fac" mask="url(#mask4)"/>
        <rect x="10" y="20" width="40" height="20" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
    </svg>

    <svg width="400" height="400" viewBox="0 0 100 100">
        
        <defs>
            <linearGradient id="gradient5">
                <stop offset="0" stop-color="#000" />
                <stop offset="1" stop-color="#fff" />
            </linearGradient>
            <mask id="mask5" x="0" y="0" width=".5" height=".5" maskContentUnits="objectBoundingBox" maskUnits="objectBoundingBox">
                <rect x="0" y="0" width="1" height="1" fill="url(#gradient5)" />
            </mask>
        </defs>
        
        <rect x="10" y="20" width="60" height="40" fill="#fac" mask="url(#mask5)"/>
        <rect x="10" y="20" width="60" height="40" fill="none" stroke="#00f" stroke-width=".5" stroke-dasharray="2.5"/>
    </svg>


    <svg width="400" height="400" viewBox="0 0 100 100">
        <defs>
            <linearGradient id="gradient61">
                <stop offset="0" stop-color="#333" />
                <stop offset="1" stop-color="#fff" />
            </linearGradient>
            <linearGradient x1="1" x2="0" id="gradient62" href="#gradient61"></linearGradient>
            <mask id="mask6" maskContentUnits="objectBoundingBox">
                <rect x="0" y="0" width=".5" height="1" fill="url(#gradient61)"/>
                <rect x=".5" y="0" width=".5" height="1" fill="url(#gradient62)"/>
                <circle cx=".5" cy=".5" r=".5" fill="white" fill-opacity=".5"/>
            </mask>
        </defs>

        <image href="../imgs/3.png" height="100" width="100" preserveAspectRatio="xMinYMid slice"/>
        <image href="../imgs/4.png" height="100" width="100"  preserveAspectRatio="xMidYMid slice" mask="url(#mask6)"/>
    </svg>

    
    <script src="index.js"></script>
</body>
</html>